<template>
    <div id="middle">
        <p>中间组件</p>
         <input v-model="valueMiddle" @change="changeValue()" type="text">
        <busInsider></busInsider>
    </div>
</template>
<script>
import busInsider from "./insider";
import bus from "./bus.js";
export default {
  name: "middle",
  components: {
      busInsider,
  },
  data() {
    return {
      valueMiddle:'',
    };
  },
  methods: {
    changeValue: function() {
      bus.$emit("value", this.valueMiddle);
    }
  },
  beforeCreate() {
    //为了尽快收到消息，写在钩子函数最开始
    bus.$on("value", e => {
      this.valueMiddle = e;
      console.log("中间层组件接收到值");
    });
  },
  beforeDestroy() {
    bus.$off();
  }
};
</script>
<style scoped>
</style>